如果您想了解javascript–在向下滚动之前,在页面加载上显示粘滞的“返回顶部”按钮的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析AndroidWebview和Javascript交互，

如果您想了解javascript – 在向下滚动之前,在页面加载上显示粘滞的“返回顶部”按钮的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用、angular 返回顶部、href=“javascript:”vs href=“javascript:void(0)”、HTML 返回顶部的各个方面，并给出实际的案例分析，希望能帮助到您！

• javascript – 在向下滚动之前,在页面加载上显示粘滞的“返回顶部”按钮
• Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用
• angular 返回顶部
• href=“javascript:”vs href=“javascript:void(0)”
• HTML 返回顶部

javascript – 在向下滚动之前,在页面加载上显示粘滞的“返回顶部”按钮

<a href="#"https://www.jb51.cc/tag/dis/" target="_blank">display: inline;">Back to top</a>


<script>
        $(document).ready(function() {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $('.go-top').fadeIn(500);
                } else {
                    $('.go-top').fadeOut(300);
                }
            });

            // Animate the scroll to top
            $('.go-top').click(function(event) {
                event.preventDefault();

                $('html,body').animate({scrollTop: 0},300);
            })
        });
    </script>

.go-top {
    position: fixed;
    bottom: 0.75em;
    right: 0.5em;
    text-decoration: none;
    color: white;
    background-color: rgba(0,0.25);
    font-size: 12px;
    padding: 10px;
    display: none;
    margin: 0;
}

.go-top:hover {
    background-color: rgba(0,0.6);
    color: white;
    text-decoration: none;
}

<a href="#"https://www.jb51.cc/tag/dis/" target="_blank">display: inline;">Back to top</a>

<a href="#"https://www.jb51.cc/tag/dis/" target="_blank">display: none;">Back to top</a>

Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用

在 Android 的开发过程中、遇到一个新需求、那就是让 Java 代码和 Javascript 代码进行交互、在 IOS 中实现起来很麻烦、而在 Android 中相对来说容易多了、Android 对这种交互进行了很好的封装、我们可以很简单的用 Java 代码调用 WebView 中的 js 函数、也可以用 WebView 中的 js 来调用 Android 应用中的 Java 代码。

案例主要包含了：

1.  Html 中调用 Android 方法
2. Android 调用 JS 方法无参数
3. Android 调用 JS 方法有参数
4. Android 调用 JS 方法有参数且有返回值处理方式 1
5. Android 调用 JS 方法有参数且有返回值处理方式 2（Android4.4 以上）

1：创建 JS 对象

webView.addJavascriptInterface(new JsInterface(), "obj");

public class JsInterface {
	//JS中调用Android中的方法 和返回值处理的一种方法
		
	/****
          * Html中的点击事件 onclick
	  *  <input type="button" value="结算" onclick="showToast(''12'')">
	  * @param toast
	  */
	@JavascriptInterface
	public void showToast(String toast) {
	  Toast.makeText(MainActivity.this, "你的商品价格是：￥"+toast, Toast.LENGTH_SHORT).show();
	}
}

 function showToast(toast) { 
	var money=toast*3;
	javascript:obj.showToast(money);
}

2：

webView.loadUrl("javascript:funFromjs()");

function funFromjs(){
    document.getElementById("helloweb").innerHTML="div显示数据,无参数";
}

3：

webView.loadUrl("javascript:funJs(''Android端传入的信息，div标签中显示,含参数'')");

function funJs(msg){
   document.getElementById("hello2").innerHTML=msg;
}

4： 

webView.loadUrl("javascript:sum(6,6)");

/***
 * Android代码调用获取J是中的返回值
 * 
 * @param result
*/
   @JavascriptInterface
   public void onSum(int result) { 
	Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show();
   } 

function sum(i,m){ 
    var result = i*m; 
    document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
    javascript:obj.onSum(result) 
} 

5：

 webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
         @Override
	 public void onReceiveValue(String value) {
	     Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
           }
});

function sumn(i,m){ 
     var result = i*m; 
     document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
     return result;
} 

   注意：

1、Java 调用 js 里面的函数、效率并不是很高、估计要 200ms 左右吧、做交互性很强的事情、这种速度很难让人接受、而 js 去调 Java 的方法、速度很快、50ms 左右、所以尽量用 js 调用 Java 方法

2、Java 调用 js 的函数、没有返回值、调用了就控制不到了

3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString () 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间

4、网页中尽量不要使用 jQuery、执行起来需要 5-6 秒、最好使用原生的 js 写业务脚本、以提升加载速度、改善用户体验。

注：使用的是本地的 Html 文件，不过在网络链接的 Html 文件也是可以实现的。   

源码点击下载

angular 返回顶部

html代码

<button go-top>TOP</button>

实现的指令

.directive(''goTop'',[''$interval'',function($interval){  //返回顶部
    return {
        restrict : ''A'',
        link : function(scope,element,attr){
            element.on("click",function(){
                var timer = $interval(function(){
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    document.documentElement.scrollTop = document.body.scrollTop =o sTop -1 00;
                    if ( osTop == 0 ) {
                        $interval.cancel(timer);
                    };
                },10)
            })
        }
    }
}])

href=“javascript:”vs href=“javascript:void(0)”

##href=“javascript:” vs href=“javascript:void(0)”

可参考
http://www.jb51.net/article/37904.htm
http://stackoverflow.com/questions/3666683/href-javascript-vs-href-javascriptvoid0

HTML 返回顶部

每次看淘宝，看微信，都回有回到顶部的小logo,小图标，或者双击返回顶部。所以就学习了如何返回顶部的操作，一开始是联想html中的链接描点，在开头出设置个标签，下面点击另外一个标志回去。有三种觉得比较适合使用，就保留下来。

第一种 添加一个超链接，然后给其href="#top",则可以使用

　　<a href="#top"title="回到顶端"></a>

第二种 href指向特定的id
<body id="goTop">
    <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
        <img src="1.jpg">
        <img src="1.jpg">
        <img src="1.jpg">
    </div>
    <a href="#goTop"title="回到顶端"></a>
</body>

第三种　用scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。
<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8"/>
    <title>返回顶端</title>
    <link rel="stylesheet" type="text/css" href="hello.css">
</head>
<body id="goTop">
    <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
        <img src="1.jpg">
        <img src="1.jpg">
        <img src="1.jpg">
    </div>
    <a href="javascript:window.scrollTo(0,0)"title="回到顶端"></a>
</body>
</html>

我们今天的关于javascript – 在向下滚动之前,在页面加载上显示粘滞的“返回顶部”按钮的分享就到这里，谢谢您的阅读，如果想了解更多关于Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用、angular 返回顶部、href=“javascript:”vs href=“javascript:void(0)”、HTML 返回顶部的相关信息，可以在本站进行搜索。